<template>
	<view class="redact">
		<view class="tops">
			<view class="vis">
				<view>车牌号</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.cph"
						placeholder="请输入车牌号"></uni-easyinput>
				</view>
			</view>
			<view class="vis">
				<view>车主姓名</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.name"
						placeholder="请输入车主名"></uni-easyinput>
				</view>
			</view>
			<view class="vis">
				<view>联系方式</view>
				<view>
					<uni-easyinput :inputBorder="false" :maxlength=11 :clearable="false" v-model="clxx.dh"
						placeholder="请输入联系方式"></uni-easyinput>
				</view>
			</view>
		</view>

		<view class="tops clx">
			<view class="vis" @click="toggle('bottom')">
				<view>车身型号</view>
				<view>
					<!-- <uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.lx" placeholder="请选择车身型号"></uni-easyinput> -->
					<view style="color: #999999;" v-if="clxx.lx == ''">
						请选择车身型号
					</view>
					<view style="color: #999999;" v-if="clxx.lx != ''">
						{{ clxx.lx }}
					</view>
					<image style="width: 8px;height: 10px;margin-left: 5px;" mode="widthFix"
						src="http://cdn.jxsr.com/right.png" />
				</view>
			</view>
			<view class="vis">
				<view>车厢大小</view>
				<view class="ckg">
					<view class="lis">
						长
						<view>
							{{ clxx.c }}
							<!-- <uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.c" placeholder=""></uni-easyinput> -->
						</view>
					</view>
					<view class="lis">
						宽
						<view>
							{{ clxx.k }}
							<!-- <uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.k" placeholder=""></uni-easyinput> -->
						</view>
					</view>
					<view class="lis">
						高
						<view>
							{{ clxx.g }}
							<!-- <uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.g" placeholder=""></uni-easyinput> -->
						</view>
					</view>
					<view class="m">米</view>
				</view>
			</view>
			<view class="vis">
				<view>车身颜色</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.cys"
						placeholder="请输入车的颜色"></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="dptp">
			<view class="titles">
				车辆图片
			</view>
			<view class="sctp">
				<uni-file-picker limit="1" v-model="imageValue" file-mediatype="image" mode="grid"
					file-extname="png,jpg" :image-styles="imageStyles" @select="select" @progress="progress"
					@success="success" @fail="fail" @delete="deletes"></uni-file-picker>
			</view>
		</view>
		<!-- 保存 -->
		<view class="buts" v-if="this.hasSetText != 'add'">
			<!-- <view class="service ser1" @click="deleteCl(id)">
				<span class="sp2">删除</span>
			</view> -->
			<view class="service ser2" @click="$noMultipleClicks(refund)">
				<span class="sp2">保存</span>
			</view>
		</view>
		<view class="buts" v-if="this.hasSetText == 'add'">
			<view class="service ser2" @click="$noMultipleClicks(refund)">
				<span class="sp2">提交申请</span>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content">
					<view class="top">
						<view style="width: 40px;height: 50px;float: left;" @click="closes">
							<image style="width: 11px;height: 13px;" mode="widthFix"
								src="http://cdn.jxsr.com/feel3.png" />
						</view>
						选择车身型号
						<view style="width: 60px;height: 50px;float: right;" @click="qdFn">
							确定
						</view>
					</view>
					<picker-view v-if="visible" :indicator-style="indicatorStyle" :mask-style="maskStyle" :value="clVal"
						@change="bindChange">
						<picker-view-column>
							<view class="item" style="" v-for="(item, index) in lxxx" :key="index"
								:class="{ item_active: clVal[0] == index }">
								<view>{{ item.vehicle_information_name }}</view>
								<view>{{ item.lasting }}*{{ item.wide }}*{{ item.high }}米</view>
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import { findById, clflqueryAllFrontEnd, addLogistics, uploadImg, deletes } from '@/utils/api.js';
export default {
	data() {
		return {
			noClick: true,
			id: '',
			type: 'center',
			clxx: {
				cph: '',
				name: '',
				dh: '',
				lx: '',
				c: '',
				k: '',
				g: '',
				cys: '',

			},
			imageValue: [],
			// 上传图片返回的图片路径
			uploadPictures: '',


			clData: [],
			imageStyles: {
				width: 110,
				height: 110,
				border: {
					radius: '10px'
				},
			},

			// 选择车辆类型
			lxxx: [],
			lxId: '',
			clVal: [0],
			visible: true,
			indicatorStyle: `height: 50px;`,
			maskStyle: "padding:10px 0",

			// 头部导航文字修改
			hasSetText: 'add',
		}

	},
	onLoad(e) {
		// console.log(uploadImg());
		// 头部导航文字修改
		if (e.clic == 'add') {
			this.hasSetText = e.clic;
			uni.setNavigationBarTitle({
				title: "申请成为车主"
			})
		} else {
			this.hasSetText = e.clic;
			uni.setNavigationBarTitle({
				title: "修改车辆"
			})
			this.id = e.id
			this.clDetails()
			// this.clData=JSON.parse(decodeURIComponent(e.data))
			// console.log(this.clData);

		}
		// console.log(this.hasSetText);
		this.gettingData()
	},
	methods: {
		// 获取数据
		clDetails() {
			// 获取车辆信息数据
			findById({
				id: this.id
			}).then((res) => {
				if (res.code === 200) {
					// console.log(res);
					this.clData = res.data
					this.clxx = {
						cph: this.clData.licensePlate,
						name: this.clData.contacts,
						dh: this.clData.telephone,
						lx: this.clData.vehicleInformation.vehicleInformationName,
						c: this.clData.vehicleInformation.lasting,
						k: this.clData.vehicleInformation.wide,
						g: this.clData.vehicleInformation.high,
						cys: this.clData.vehicleColor,
					},
						this.lxId = this.clData.vehicleInformation.id
					this.imageValue = [
						{
							"name": this.clData.licensePlate,
							"extname": "png",
							"url": this.clData.licensePlatePicture,
						}
					]
				} else {
					uni.showToast({ title: "请求错误", position: 'bottom' })
				}
			}).catch((err) => {
				uni.showToast({ title: '网络繁忙', position: 'bottom' })
			});
		},
		// 获取数据
		gettingData() {
			// 获取车辆类型数据
			clflqueryAllFrontEnd({}).then((res) => {
				if (res.code === 200) {
					// console.log(res);
					this.lxxx = res.data
				} else {
					uni.showToast({ title: "请求错误", position: 'bottom' })
				}
			}).catch((err) => {
				uni.showToast({ title: '网络繁忙', position: 'bottom' })
			});
		},
		// 点击选择车辆类型
		toggle(type) {
			this.type = type
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type)
		},
		change(e) {
			console.log('当前模式：' + e.type + ',状态：' + e.show);
		},


		// 获取上传状态
		select(e) {
			// console.log('选择文件：',e)
			// console.log(this.imageValue);
			// this.imageValue.push({url:e.tempFilePaths.pop(),name:"车辆图片"})
			uni.uploadFile({
				url: uploadImg(), //仅为示例，非真实的接口地址
				filePath: e.tempFilePaths[0],
				name: "image",
				header: {
					// "Accept": "application/json",
					// "Content-Type": 'multipart/form-data; charset=UTF-8',
					"token": uni.getStorageSync('token') ? uni.getStorageSync('token') : '',
					"type": 1
				},
				//这个是参数根据你后台的需求可以隐藏
				// formData: {
				// 	image: e.tempFilePaths[0]
				// }, 
				success: res => {
					var ress = JSON.parse(res.data);
					// console.log(ress.data);
					this.uploadPictures = ress.data
					this.imageValue = []
					this.imageValue.push({ url: ress.data, name: "车辆图片", extname: "png" })
					uni.showToast({ title: '上传成功', position: 'bottom' })
					// this.imageValue.push({url:ress.data,name:"车辆图片","extname":"png"})
				}
			});
		},

		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e)
		},
		// 上传成功
		success(e) {
			console.log('上传成功')

		},
		// 上传失败
		fail(e) {
			console.log('上传失败：', e)
		},
		deletes(e) {
			console.log("移除图片", e);
			const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
			this.imageValue.splice(num, 1);
			this.uploadPictures = ''
		},

		bindChange(e) {
			const val = e.detail.value
			this.clVal = val
			this.lxId = this.lxxx[val].id
			// console.log(this.lxId);
			this.clxx['lx'] = this.lxxx[val].vehicle_information_name
			this.clxx['c'] = this.lxxx[val].lasting
			this.clxx['k'] = this.lxxx[val].wide
			this.clxx['g'] = this.lxxx[val].high
		},
		qdFn() {
			this.lxId = this.lxxx[this.clVal[0]].id
			// console.log(this.lxId);
			this.clxx['lx'] = this.lxxx[this.clVal[0]].vehicle_information_name
			this.clxx['c'] = this.lxxx[this.clVal[0]].lasting
			this.clxx['k'] = this.lxxx[this.clVal[0]].wide
			this.clxx['g'] = this.lxxx[this.clVal[0]].high
			this.$refs.popup.close()
		},
		// 车辆类型弹框隐藏
		closes() {
			this.$refs.popup.close()
		},
		// 删除车辆信息
		deleteCl(ids) {
			if (this.clData.logisticsStatus != 1) {
				uni.showModal({
					content: "您确定要删除当前车辆吗？",
					confirmText: "确定",
					cancelText: "取消",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// 获取车辆信息数据
							deletes({
								ids: [ids]
							}).then((res) => {
								if (res.code === 200) {
									// console.log(res);
									uni.showToast({ title: "删除成功", position: 'bottom' })
									uni.navigateBack({
										delta: 2
									});
								} else {
									uni.showToast({ title: "请求错误", position: 'bottom' })
								}
							}).catch((err) => {
								uni.showToast({ title: '网络繁忙', position: 'bottom' })
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			} else {
				uni.showToast({ title: "车辆还是运输中请勿删除！", position: 'bottom' })
			}

		},
		// 保存
		refund() {
			let obj = {}
			let tkText = "您确定要修改车辆信息吗？"
			let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
			if (this.clxx.cph == '') {
				uni.showToast({ title: '车牌号不能为空', position: 'bottom' })
			} else if (this.clxx.name == '') {
				uni.showToast({ title: '姓名不能为空', position: 'bottom' })
			} else if (this.clxx.dh == '') {
				uni.showToast({ title: '联系方式不能为空', position: 'bottom' })
			} else if (!myreg.test(this.clxx.dh)) {
				uni.showToast({ title: "请输入正确的联系方式", position: 'bottom' })
			} else if (this.clxx.lxId == '') {
				uni.showToast({ title: '请选择车辆类型', position: 'bottom' })
			} else if (this.clxx.cys == '') {
				uni.showToast({ title: '车辆颜色不能为空', position: 'bottom' })
			} else {
				if (this.hasSetText == 'add') {
					if (this.clxx.uploadPictures == '') {
						uni.showToast({ title: '请查看图片是否上传', position: 'bottom' })
					} else {
						// 添加车辆信息
						obj = {
							licensePlate: this.clxx.cph,
							contacts: this.clxx.name,
							telephone: this.clxx.dh,
							vehicleInformationId: this.lxId,
							vehicleColor: this.clxx.cys,
							licensePlatePicture: this.uploadPictures
						}
					}

					tkText = "每个用户只能有一个身份，您确定要申请吗？"
				} else {
					// 修改车辆信息
					obj = {
						id: this.id,
						licensePlate: this.clxx.cph,
						contacts: this.clxx.name,
						telephone: this.clxx.dh,
						vehicleInformationId: this.lxId,
						vehicleColor: this.clxx.cys
					}
					if (this.uploadPictures == '') {
						obj.licensePlatePicture = this.clData.licensePlatePicture
					} else {
						obj.licensePlatePicture = this.uploadPictures
					}

					tkText = "您确定要修改车辆信息吗？"
				}
				uni.showModal({
					content: tkText,
					confirmText: "确定",
					cancelText: "取消",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							// 修改添加车辆
							addLogistics(obj).then((res) => {
								if (res.code === 200) {
									console.log(res);
									// this.clData=res.data
									uni.showToast({ title: "操作成功", position: 'bottom' })
									uni.navigateBack({
										delta: 1
									});
								} else {
									uni.showToast({ title: "请求错误", position: 'bottom' })
								}
							}).catch((err) => {
								uni.showToast({ title: '网络繁忙', position: 'bottom' })
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.redact {
	padding: 10px;

	.tops {
		padding: 0 10px;
		margin-bottom: 10px;
		background: #FFFFFF;
		border-radius: 10px;

		.vis {
			height: 50px;
			border-bottom: 1px solid #F5F5F5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: $mainText;
			line-height: 22px;

			view:nth-child(2) {
				width: 50%;

				::v-deep .uni-easyinput {
					.uni-easyinput__content {
						.uni-easyinput__content-input {
							.uni-easyinput__placeholder-class {
								font-size: 18px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;
								line-height: 22px;
								text-align: right;
							}

							.uni-input-input {
								font-size: 18px;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: $mainText;
								line-height: 22px;
								text-align: right;
							}
						}
					}
				}
			}
		}

		.vis:last-child {
			border-bottom: none;
		}

	}

	.clx {
		.vis {
			view:nth-child(2) {
				width: 70%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 18px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: $mainText;
				line-height: 22px;
			}
		}

		.vis:nth-child(2) {
			.ckg {
				.lis {
					width: 30%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 18px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 22px;

					view {
						font-weight: 400;
						color: $mainText;
						margin-left: 5px;
					}
				}

				.m {
					font-weight: 400;
				}
			}
		}
	}

	.dptp {
		background: #FFFFFF;
		border-radius: 10px;
		padding: 0 10px;
		margin-bottom: 10px;

		.titles {
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: $mainText;
			line-height: 60px;
		}

		.sctp {
			padding-bottom: 20px;
		}
	}

	.buts {
		width: 100%;
		position: fixed;
		bottom: 4%;
		left: 10px;

		.service {
			width: 95%;
			height: 56px;
			margin-bottom: 10px;
			border-radius: 28px;
			display: flex;
			justify-content: center;
			align-items: center;

			.sp2 {
				font-size: 18px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 56px;
				padding: 0 5px;
			}
		}

		.ser1 {
			background: #999999;
		}

		.ser2 {
			background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
			box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
		}
	}

	.popup-content {
		height: 350px;
		background-color: #fff;

		.top {
			height: 50px;
			font-size: 18px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: $mainText;
			line-height: 50px;
			text-align: center;
			border-bottom: 1px solid #D4D4D4;
		}

		picker-view {
			width: 100%;
			height: 300px;
		}

		.item {
			line-height: 50px;
			text-align: center;
			font-size: 15px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: $mainText;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}

		.item_active {
			color: #1D9B5D;
			font-size: 18px;
		}
	}
}
</style>
